<template>
	<div class="icons-container">
		<aside>
			<a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" target="_blank">
				Add and use
			</a>
		</aside>
		<el-tabs type="border-card">
			<el-tab-pane label="Icons">
				<div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
					<el-tooltip placement="top">
						<div slot="content">
							{{ generateIconCode(item) }}
						</div>
						<div class="icon-item">
							<svg-icon :icon-class="item" class-name="disabled"></svg-icon>
							<span>{{ item }}</span>
						</div>
					</el-tooltip>
				</div>
			</el-tab-pane>
			<el-tab-pane label="Element-UI Icons">
				<div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
					<el-tooltip placement="top">
						<div slot="content">
							{{ generateElementIconCode(item) }}
						</div>
						<div class="icon-item">
							<svg-icon :icon-class="'el-icon-' + item" class-name="disabled"></svg-icon>
							<span>{{ item }}</span>
						</div>
					</el-tooltip>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	
	const l = httpVueLoader;
	import clipboard from '/vue/utils/clipboard.js';
	import svgIcons from '/vue/views/icons/svg-icons.js';
	import elementIcons from '/vue/views/icons/element-icons.js';
	
	module.exports = {
		name: 'Icons',
		data() {
			return {
				svgIcons,
				elementIcons
			}
		},
		methods: {
			generateIconCode(symbol) {
				return `<svg-icon icon-class="${symbol}" ></svg-icon>`
			},
			generateElementIconCode(symbol) {
				return `<i class="el-icon-${symbol}"></i>`
			},
			handleClipboard(text, event) {
				clipboard(text, event)
			}
		}
	}
</script>

<style scoped>
	.icons-container {
		margin: 10px 20px 0;
		overflow: hidden;
	}

		.icons-container .icon-item {
			margin: 20px;
			height: 85px;
			text-align: center;
			width: 100px;
			float: left;
			font-size: 30px;
			color: #24292e;
			cursor: pointer;
		}

		.icons-container span {
			display: block;
			font-size: 16px;
			margin-top: 10px;
		}

		.icons-container .disabled {
			pointer-events: none;
		}
</style>
